<script setup>
import {onMounted} from 'vue'
import {stringIsNull} from "@/utils/string_utils.js";

/**
 * 接收父组件传递的参数
 * @type {Prettify<Readonly<ExtractPropTypes<{}>>>}
 */
const props = defineProps({
  // 遮罩层点击事件处理器函数
  coverClickHandler: {type: Function, default: () => {}},
  // 小尾巴侧边导航栏组件关闭按钮点击事件处理器函数
  closeBtnClickHandler: {type: Function, default: () => {}},
  // 背景图片地址
  bgImageUrl: {type: String, default: ''},
})

/**
 * 动态为小尾巴侧边导航栏组件设置背景
 */
function setSliderNavBgImg() {
  // 如果没有传递侧边导航栏背景图片地址直接退出
  if (stringIsNull(props?.bgImageUrl)) return
  // 获取侧边导航栏元素
  const sliderNavEle = document.querySelector('.tail-slider-nav')
  // 动态设置侧边导航背景图片
  sliderNavEle.style.backgroundImage = `url(${props?.bgImageUrl})`
}
// 调用函数动态为小尾巴侧边导航栏组件设置背景
onMounted(() => {
  setSliderNavBgImg()
})

</script>

<template>
  <div>
    <!-- 小尾巴侧边导航栏组件遮罩层 -->
    <div class="tail-slider-nav-cover" @click="coverClickHandler"></div>
    <!-- 小尾巴侧边导航栏组件 -->
    <div class="tail-slider-nav">
      <!-- 小尾巴侧边导航栏组件 logo -->
      <div class="tail-slider-nav-logo">
        <slot name="sliderNavLogo"></slot>
      </div>
      <!-- 小尾巴侧边导航栏组件选项 -->
      <!-- scroll-custom 自定义滚动条样式 -->
      <div class="tail-slider-nav-items scroll-custom">
        <slot name="sliderNavItems"></slot>
      </div>
      <!-- 小尾巴侧边导航栏组件关闭按钮 -->
      <div class="tail-slider-nav-close-btn" @click="closeBtnClickHandler">
        <slot name="sliderNavCloseBtn"></slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 小尾巴侧边导航栏组件遮罩层
 */
.tail-slider-nav-cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: var(--tail-slider-nav-cover-bgc);
}
/*
 * 小尾巴侧边导航栏组件
 */
.tail-slider-nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: max-content;
  height: 100vh;
  background-color: var(--tail-slider-nav-bgc);
  background-position: center; // 背景居中
  background-size: cover; // 背景图片覆盖
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;

  /*
   * 小尾巴侧边导航栏组件 logo
   */
  .tail-slider-nav-logo {
    padding: 2rem 2.5rem;
  }

  /*
   * 小尾巴侧边导航栏组件选项
   */
  .tail-slider-nav-items {
    overflow: auto;
  }

  /*
   * 小尾巴侧边导航栏组件关闭按钮
   */
  .tail-slider-nav-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    transition: all 0.5s;
    color: var(--tail-slider-nav-font-color);

    &:hover {
      transform-origin: center center;
      transform: rotateZ(360deg);
    }
  }
}
</style>